<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="../share/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册页面</title>

<style type="text/css">
div .registeTitle {
	width: 100%;
	height: 300px;
}

div .registeTitle {
	width: 100%;
	height: 33px;
	margin-top: 5px;
	font-size: 14px;
	font-weight: bold;
	background-color: #DFDFDF;
	border-top: 1px solid #DDD;
}

div .registeTitle div {
	margin-top: 7px;
	margin-left: 10px;
}

ul .registeUl {
	width: 50%;
	height: 200px;
}

.registeUl li {
	margin-top: 10px;	
	list-style: none;
}

.registeUl label {
	margin-left: 0;
	text-align: right;
	font-size: 14px;
	color: #333;
	width: 60px;
	position: absolute;
	padding-top: 5px;
}

.registeUl input {
	margin-left: 80px;
	border: 1px solid #CCCCCC;
    height: 18px;
    line-height: 18px;
    padding: 5px;
    vertical-align: top;
    width: 220px;
}

.registeUl .sex1 {
	width: 20px;
	margin-left: 80px;
}

.registeUl .sex2 {
	width: 20px;
	margin-left: 35px;
}

.registeUl select {
	margin-left: 80px;
	width: 110px;
	height: 25px;
	line-height: 25px;
}

.registeUl .se2 {
	margin-left: 10px;
}

.registeUl .vercode {
	width: 100px;
}

.registeUl .codeImg {
	margin-left: 10px;
	margin-top: -5px;
	text-align: left;
	width: 200px;
	font-size: 13px;
	font-family: serif;
	color: #333;
}

.registeUl .sexLabel {
	margin-left: 2px;
	margin-top: -3px;
	width: 30px;
	text-align: left;
}
.theLink{
      display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和height才起作用*/
      width:100px;
      height:30px;
      margin-top: 20px;
      margin-left: 150px;
      background:#ddd;
      font-weight: bold;
      color: #333;
      border: 1px solid #333; 
      font-size: 14px;
}
</style>


</head>
<body>

<div id="container">
  <!-- header -->
  <jsp:include page="./layout/_header.jsp" />
  <div id="content">
  <div class="registeDiv">
  
  	<div class="registeTitle">
  		<div>填写注册信息</div>
  	</div>
  	<div class=".registeForm">
  	<form id="registeForm" action="${ctx }/user/doRegiste.do" method="post">
  		<ul class="registeUl">
  			<li><label>邮箱</label> <input id="email" type="text" name="email" /></li>
  			<li><label>用户名</label> <input id="name" type="text" name="name" /></li>
  			<li><label>密码</label> <input id="password" type="password" name="password" /></li>
  			<li><label>确认密码</label> <input id="cofirm_pass" type="password" name="cofirm_pass"/></li>
  			<li><label>性别</label> <input id="sex" type="radio" name="sex" value="1" checked="checked" class="sex1"/><label class="sexLabel">侠客</label>
  					  <input id="sex" type="radio" name="sex" value="0" class="sex2"/><label class="sexLabel">女侠</label></li>
  			<li><label>居住地区</label>
  						 <select name="province" class="se1" >
  							<option>--请选择--</option>
  						 </select>
  						 <select name="city" class="se2" >
  							<option>--请选择--</option>
  						 </select>
  			</li>
  			<li><label>验证码</label> <input id="vercode" type="text" name="vercode" class="vercode"/>
  				<label class="codeImg"><img alt="验证码" id="safecode" src="${ctx }/user/vercode.do"/>
  					&nbsp;<a id="changeNext" href="#">看不清楚?换一张</a></label>
  			</li>
  		</ul>
  		<input id="registe" type="button" name="registe" value="注册" class="theLink"/>
  	</form>
  	</div>
  </div>
    <div class="cleaner">&nbsp;</div>
  </div>
  <!-- footer -->
  <jsp:include page="./layout/_footer.jsp"></jsp:include>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$("#cofirm_pass").blur(function(){
			var pass = $("#password").val();
			var conf_pass = $(this).val();
			if(pass != conf_pass){
				$(this).after("<div id='conf_err' class='check'>两个密码不一致，请重新填写确认密码</div>");
			} else {
				$("#conf_err").remove();
			}
		});
		
		$("#registe").click(function(){
			var check = true;
			var timenow = new Date().getTime();   
			// 验证验证码
			var verCode = $("#vercode").val();
			$.get("validVerCode.do?vercode_request=" + verCode, function(res){
				if(res != "true") {
					check = false;
					$("#changeNext").after("<div>验证码输入错误</div>");
					$("#vercode").val("");
					$("#safecode").src="vercode.do?d=" + timenow;
				}
			},'json');
			
			if(check){
				$("#registeForm").submit();
			}
		});
	});
</script>

</body>
</html>